<template>
  <n-drawer
    class="drawer1"
    v-model:show="active"
    placement="top"
    :on-after-leave="leave"
  >
    <div class="wrap">
      <n-input
        ref="input1"
        v-model:value="keyWords"
        type="text"
        placeholder="请输入"
        @keydown="keydown"
      />
      <n-button :disabled="!keyWords" @click="goSearch">搜索</n-button>
    </div>
  </n-drawer>
</template>

<script setup lang="ts">
import { NDrawer, NInput, NButton } from "naive-ui";

const active = ref(false);
const keyWords = ref("");
const input1 = ref<HTMLInputElement>();

const open = () => {
  keyWords.value = "";
  active.value = true;
  input1.value?.focus();
};
const leave = () => {
  active.value = false;
};
const goSearch = () => {
  leave();
  navigateTo({
    name: "search-type-page",
    params: {
      type: "course",
      page: 1,
    },
    query: {
      keyword: keyWords.value,
    },
  });
};
const keydown = (e: KeyboardEvent) => {
  if (e.key === "Enter" && keyWords.value) {
    goSearch();
  }
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.drawer1 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  width: 400px;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
